{% url 'leave-message' as leave_message %}
<div class="c-m-list c-m-message">
<div class="form-inline">
    <div class="form-group">
        <label for="exampleInputName1">用户昵称: </label>
        <input type="text" name="name" value=""  class="form-control" id="exampleInputName1" placeholder="用户昵称:">
    </div>
    <div class="form-group">
        <label for="exampleInpuNumber2">联系电话: </label>
        <input type="text" name="phone" value="" class="form-control" id="exampleInpuNumber2" placeholder="手机号码:">
    </div>
    <div class="form-group">
        <label for="exampleInpuNumber3">在线Q Q: </label>
        <input type="text" name="QQ" value="" class="form-control" id="exampleInpuNumber3" placeholder="在线QQ:">
    </div>
    <div class="form-group">
        <label for="exampleInpuNumber4">电子邮箱: </label>
        <input type="text" name="Email" value="" class="form-control" id="exampleInpuNumber4" placeholder="电子邮箱:">
    </div>
    <div class="form-group">
        <label for="exampleInputName5">留言标题: </label>
        <input type="text" name="title" value="" class="form-control" id="exampleInputName5" placeholder="留言标题:">
    </div>
    <div class="form-group">
        <label for="exampleInputName6">留言内容: </label>
        <textarea rows="6" name="content" value="" cols="20" class="form-control" id="exampleInputName6" placeholder="留言内容:"></textarea>
    </div>
    <div class="form-group c-m-m-code">
        <label for="exampleInputName7"> 验证码: </label>
        <input type="text" name="code" value="" class="form-control" id="exampleInputName7" placeholder="验证码:">
        <div class="c-m-m-c-img pull-right">
            <!--<img src="images/message-code.jpg" alt="验证码"/>-->
            <span value="6789">6789</span>
            <a>看不清</a>
        </div>
    </div>
    <div class="clearfix c-m-m-submit">
        <button type="submit">发表留言</button>
    </div>
</div>
</div>
</div>
<div class="ajax-form-animation">
    <div class="a-f-a-text"></div>
</div>
<script>
//随机4位数

$('.ajax-form-animation').bind('click', function(){
    $(this).css('display','none');
});

function RndNum(n) {
        var rnd = "";
        for (var i = 0; i < n; i++)
            rnd += Math.floor(Math.random() * 10);
        return rnd;
    }
    $('.c-m-m-c-img span').text(RndNum(4));
    $('.c-m-m-c-img a').bind('click',function(){
        $('.c-m-m-c-img span').text(RndNum(4));
    });
    //验证
    $('input,textarea').blur(function(){
        var _self = $.trim($(this).val()), name = $(this).attr('name'), code = $.trim($('.c-m-m-c-img span').text());
        var regular = {
            phone:/^[1][3-8]\d{9}$/,
            QQ: /^[1-9][0-9]{5,10}/,
            Email: /^([a-z0-9][a-z0-9_\.-]+)@([a-z0-9\.-]+)\.([a-z\.]{2,6})$/
        };
        if (_self.length != 0){
            if (name == "name" || (name == "phone" && regular.phone.test(_self)) || (name == "QQ" && regular.QQ.test(_self)) || (name == "Email" && regular.Email.test(_self)) || name == "title" || name == "content" || (name == "code" && _self == code)){
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
        } else {
            $(this).addClass('active');
        }
    });


   $('.c-m-m-submit button').bind('click', function(){
        var _val1 = $.trim($('#exampleInputName1').val()).length,
            _val2 = $.trim($('#exampleInpuNumber2').val()).length,
            _val3 = $.trim($('#exampleInpuNumber3').val()).length,
            _val4 = $.trim($('#exampleInpuNumber4').val()).length,
            _val5 = $.trim($('#exampleInputName5').val()).length,
            _val6 = $.trim($('#exampleInputName6').val()).length,
            _val7 = $.trim($('#exampleInputName7').val()).length,
            act = $('input,textarea').hasClass('active');
        if((_val1 && _val2 && _val3 && _val4 && _val5 && _val6 && _val7) > 0 && !act){
            $.ajax({
                type: "POST",
                url: {{leave_message}},
                data: {
                    "name": $('#exampleInputName1').val(),
                    "phone": $('#exampleInpuNumber2').val(),
                    "QQ": $('#exampleInpuNumber3').val(),
                    "Email": $('#exampleInpuNumber4').val(),
                    "title": $('#exampleInputName5').val(),
                    "content": $('#exampleInputName6').val(),
                    "code": $('#exampleInpuNumber7').val()
                },
                dataType: "json",
                beforeSend: function () {
                    $('.ajax-form-animation').css('display','block');
                    $('.ajax-form-animation .a-f-a-text').text('提交中...');
                },
                success: function (data) {
                    if(data.code == 0){
                        $('.ajax-form-animation .a-f-a-text').text('提交成功!');
                    } else if(data.code != 0) {
                        $('.ajax-form-animation .a-f-a-text').text(data.result);
                    }
                },
                error: function () {
                    $('.ajax-form-animation .a-f-a-text').text('提交失败!');
                }
            });
        } else {
            $('.ajax-form-animation').css('display','block');
            $('.ajax-form-animation .a-f-a-text').text('格式错误!');
        }

    });

</script>
